<template>
  <div id="musicuser">

    <!-- div样式问题 -->
      <div v-if="$store.state.profile.userstate == 1" id="musicuserch1"  ><img :src="$store.state.profile.userinfo.profile.avatarUrl" alt="头像"></div>
      <div v-if="$store.state.profile.userstate == 1" id="musicuserch2" >
        <el-dropdown @command="handleCommand" style="height: 2rem;">
          <span class="el-dropdown-link">
          <h3 >{{$store.state.profile.userinfo.profile.nickname}} </h3></span>
           <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              <el-dropdown-item command="ces">测试</el-dropdown-item>

            </el-dropdown-menu>
        </el-dropdown>
      </div>




      <!-- <div v-if="$store.state.userstate == 1" id="musicuserch2" ><h3 >{{$store.state.userinfo.profile.nickname}} </h3></div> -->

  
     <!-- v-if="$store.state.userstate == 0" -->
    <div v-if="$store.state.profile.userstate == 0" class="tologin" @click="tologin()"><span>登录</span></div>
  </div>
</template>

<script>
import {userlogout} from '../../../network/profile'

export default {
  name: 'MusicUser',
  methods: {
    tologin() {
      this.$router.push('/login')
    },
    handleCommand(command) {
      console.log(command);
      switch (command) {
        case 'logout':
          console.log("退出登录");
          //退出登录api
          userlogout();
          //清除浏览器的token
          localStorage.removeItem("token")
          //清除用户数据
          this.$store.commit('DELUSERINFO')
          break;
        case 'ces':
          console.log("测试");
          break;
      
        default:
          console.log("出现错误选择");
          break;
      }
      /* switch (command) {
        case "logout":
          //退出登录
             //userlogout()
             this.$message('退出登录成功'),
             localStorage.removeItem("token"),
             this.$router.push('/recommend')
          break;
      
        default:
          console.log("未知操作");
          break;
      } */
    },
  }
}
</script>

<style>
#musicuser {
  display: flex;

}
#musicuserch1 img {
  width: 3rem;
  border-radius: 50%;
  vertical-align: middle;
}
#musicuser span {
  height: 10vh;
  display: inline-block;

}
#musicuserch1 {
  height: 3rem;
  margin-top: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
}
#musicuserch2 {
  width: 5rem;
  height: 2rem;
  padding-top:0.5rem;
  
}
#musicuserch2 h3{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tologin {
  margin: 1.5rem 0 0 2rem;
}
</style>